<template>
  <div class="divisional">
    <div style="height:280px" v-show="false">
      <div class="tjdiv" style="">
        <div class="right-tt">
          <!--<span ><i class="el-icon-reading" style="font-size:18px; color:green"></i></span>
          <span class="txt-span">当月总电话量：{{tjData.count}}</span>
          <span class="txt-span">当月已拨打电话量：{{tjData.haveCount}}</span>
          <span class="txt-span">次月未拨打电话量：{{tjData.noCount}}</span>-->
          <div ref="chartPCyan" style="float: left; width: 280px; height: 240px; ">11</div>
          <div ref="chartPSkyBlue" style="float: left; width: 280px; height: 240px;">11</div>
          <div ref="chartPgreen" style="float: left; width: 280px; height: 240px; ">11</div>

        </div>
      </div>
      <div class="taskDiv">
        <div class="left-content">
          <el-tabs type="card" v-model="taskType" @tab-click="updateTask">
            <el-tab-pane label="今日待办" name="todo">
              <div >
                <el-table
                  ref="tab1"
                  :data="taskData"
                  style="width: 100%;height: 100%"
                  :row-style="{height: '40px'}"
                  :cell-style="{padding:'0px'}"
                >
                  <el-table-column prop="name" label="任务名称" width></el-table-column>
                  <el-table-column prop="timeRange" label="任务时间段"></el-table-column>
                  <el-table-column prop="createTime" label="创建时间"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <span>
                        <el-link :underline="false" @click="edit(scope.row)" type="primary" size="small">编辑</el-link>
                        <el-link :underline="false" @click="deleteinfo(scope.row)" type="danger" size="small">删除</el-link>
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已处理" name="done">
              <div>
                <el-table
                  ref="tab2"
                  :data="taskData"
                  style="width: 100%;height: 100%"
                  :row-style="{height: '40px'}"
                  :cell-style="{padding:'0px'}"
                >
                  <el-table-column prop="name" label="任务名称" width></el-table-column>
                  <el-table-column prop="timeRange" label="任务时间段"></el-table-column>
                  <el-table-column prop="createTime" label="创建时间"></el-table-column>
                  <el-table-column prop="createTime" label="处理时间"></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="search_box">
      <el-row :gutter="20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo" label-width="80px" label-position="right">
          <el-col :span="6">
            <el-form-item label="客户姓名:" prop='name'>
              <el-input v-model.trim="searchInfo.name" size="small" placeholder="请输入客户姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件号码:" prop='identificationNumber'>
              <el-input v-model.trim="searchInfo.identificationNumber" size="small" placeholder="请输入证件号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卡号:" prop='cardNumber'>
              <el-input v-model.trim="searchInfo.cardNumber" size="small" placeholder="请输入卡号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:" prop='phoneNumber'>
              <el-input v-model.trim="searchInfo.phoneNumber" size="small" placeholder="请输入电话号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop=''>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop=''>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" prop=''>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="padding-left: 80px">
            <el-button size="small" type="primary" @click="search">查询</el-button>
            <el-button size="small" type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <el-row :gutter="20" align="center">
      <el-tabs type="border-card" v-model="activeName" @tab-click="getData">
        <el-tab-pane label="在催队列" name="doing">
          <el-table
            v-loading="loading"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(212, 216, 206, 1)"
            ref="tableData1"
            :data="tableData"
            :header-cell-style="{background:'LightYellow	',color:'black'}"
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" :index="getNum" align="center"></el-table-column>
            <el-table-column prop="name" label="客户姓名" ></el-table-column>
            <el-table-column prop="identificationNumber" label="证件号码" :formatter="hidInfo"></el-table-column>
            <el-table-column prop="cardNumber" label="卡号" :formatter="hidInfo"></el-table-column>
            <el-table-column prop="phoneNumber" label="联系方式" :formatter="hidInfo"></el-table-column>
            <el-table-column prop="billDay" label="账单日"></el-table-column>
            <el-table-column prop="overdueArrears" label="逾期欠款"></el-table-column>
            <el-table-column prop="overdraft" label="透支额"></el-table-column>
            <!--<el-table-column prop="overdueDay" label="逾期天数"></el-table-column>-->
            <el-table-column prop="productName" label="产品名称"></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="showDetail(scope.row)" type="primary" size="small">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBox">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15,20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成队列" name="done">
          <el-table
            v-loading="loading"
            element-loading-text="数据加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(212, 216, 206, 1)"
            ref="tableData1"
            :data="tableData"
            :header-cell-style="{background:'LightYellow	',color:'black'}"
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" :index="getNum" align="center"></el-table-column>
            <el-table-column prop="name" label="客户姓名" ></el-table-column>
            <el-table-column prop="identificationNumber" label="证件号码" :formatter="hidInfo"></el-table-column>
            <el-table-column prop="cardNumber" label="卡号" :formatter="hidInfo"></el-table-column>
            <el-table-column prop="phoneNumber" label="联系方式" :formatter="hidInfo"></el-table-column>
            <el-table-column prop="billDay" label="账单日"></el-table-column>
            <el-table-column prop="overdueArrears" label="逾期金额"></el-table-column>
            <el-table-column prop="overdraftPrincipal" label="透支本金"></el-table-column>
            <el-table-column prop="overdueDay" label="逾期天数"></el-table-column>
            <el-table-column prop="talkBegin" label="通话开始时间"></el-table-column>
            <el-table-column prop="talkEnd" label="通话结束时间"></el-table-column>
            <!--
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="showDetail(scope.row)" type="primary" size="small">详情</el-button>
            </el-table-column>-->
          </el-table>
          <div class="pageBox">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15,20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>

        </el-tab-pane>
      </el-tabs>

    </el-row>
    <!-- table详情弹窗 -->
    <case-detail
      :row="row"
      v-if="dialogVisible_detail"
      :dialogVisible.sync="dialogVisible_detail"
    ></case-detail>
  </div>
</template>
<script>
import { cmcUrl } from '../../../../static/baseUrl'
import CaseDetail from "./components/CaseDetail";
export default {
  components:{
    CaseDetail,
  },
  data() {
    return {
      tjData:{
        count: "",
        haveCount: "",
        noCount: "",
      },
      currentPage: 1,
      total: 0,
      pageSize: 10,
      searchInfo: {
        identificationNumber: "",
        name: "",
        cardNumber: "",
        phoneNumber: "",
        billDay: "",
        overdueDay: "",
        overdueArrears: "",
      },
      loading: false,
      tableData: [],
      undoData:[
        {
          name: "任务0",
          timeRange: "20200908-20200912",
          createTime: "20200910",
        },
        {
          name: "任务1",
          timeRange: "20200908-20200912",
          createTime: "20200910",
        },
        {
          name: "任务2",
          timeRange: "20200908-20200912",
          createTime: "20200910",
        },
        {
          name: "任务一",
          timeRange: "20200908-20200912",
          createTime: "20200909",
        },
        {
          name: "任务二",
          timeRange: "20200907-20200915",
          createTime: "20200908",
        },
      ],
      taskData:[
      ],
      isAdd: false,
      activeName: "doing",
      taskType: "todo",
      version: "80",
      dialogVisible_detail: false,
      row: {},
    };
  },
  mounted() {
    this.pieChartsCyan();
    this.pieChartsSkyBlue();
    this.pieChartsgreen();
  },
  created() {
    this.updateTask();
    this.getData();
    this.getTjData();
  },
  methods: {

    getNum(index){
      return index = (index + 1) + (this.currentPage - 1) * this.pageSize;
    },
    updateTask(){
      let params = {
        isFinish: "",
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }
      if(this.taskType=="todo"){
      }else if(this.taskType=="done"){
        params.isFinish = "2";
      }
      this.$axios({
        method: "post",
        url: `/CMC/api/tbCall/staff/leadCollectionList`,
        params: params,
        headers:{'Content-Type':'application/x-www-form-urlencoded'},
      }).then((res) => {
       // console.log("res==",res);
        if(res.code==200){

        }else{
          //console.log("数据拉取失败");
        }
      }).catch((error) => {
        //console.log("error")
        })
    },
    getData(){
      let params = {
        isFinish: "",
        pageNum: this.currentPage-1,
        pageSize: this.pageSize,
        ...this.searchInfo
      }

      if(this.activeName=="doing"){
      }else if(this.activeName=="done"){
        params.isFinish = "2";
      }
      this.loading = true;
      this.$axios({
        method: "post",
        url: `/CMC/api/tbCall/staff/collectionList`,
        params: params,
        headers:{'Content-Type':'application/x-www-form-urlencoded'},
      }).then((res) => {
        this.loading = false;
        //Zconsole.log("数据拉取失败");
        if(res.code==200){
            this.total = Number(res.data.total);
            this.tableData = res.data.list;
        }else{
          //console.log("数据拉取失败");
        }
      }).catch((error) => {
        //console.log("error")
        })
    },
    getTjData(){
      this.$axios({
        method: "post",
        url: `/CMC/api/tbCall/staff/countMobile`,
      }).then((res) => {
        this.loading = false;
        if(res.code==200){
          this.tjData = res.data;
        }else{
          //console.log("数据拉取失败");
        }
      }).catch((error) => {
        //console.log("error")
        })
    },
    showDetail(data){
      this.row = JSON.parse(JSON.stringify(data))
      this.dialogVisible_detail = true;
    },
    add() {
      this.isAdd = true;
    },
    search(){
      this.currentPage = 1;
      this.getData();
    },
    handleCurrentChange(data) {
      this.currentPage = data;
      this.getData();
    },
    handleSizeChange(data) {
      this.pageSize = data;
      this.getData();
    },
    deleteinfo(val) {
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    edit(data) {
      //console.log(data, "sss");
      this.isEdit = true;
    },
    reset() {
      this.$refs.searchInfo.resetFields();
    },
    pieChartsCyan() {
      let myChart = this.$echarts.init(this.$refs.chartPCyan);
      //console.log(this.$refs.chart)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '本人承诺还款',
          left: 'center',//主副标题的水平位置
          padding: 20,//标题内边距,
          itemGap: 110,//主副标题间距
          textStyle: {
            color: 'MediumTurquoise',
            fontStyle: 'normal',
            fontSize: 14,
            fontWeight: 'normal',
          },
          subtext: '',
          subtextStyle: {
            color: '#00BFFF',
            fontSize: 14,
            fontWeight: 'normal'
          },

        },
        labelLine: {
          show: false
        },
        series: [{
          avoidLabelOverlap: false,
          labelLine: {
            show: false
          },

          label: {
            show: false, normal: {
              show: true,
              position: 'center',
              color: '#4c4a4a',
              formatter: this.version

            },
            position: 'center',
            emphasis: {//中间文字显示
              show: true,
            }
          },
          radius: ['50%', '30%'],
          center: ["50%", "50%"],
          name: '金额',
          type: 'pie',
          data: [
            {
              name: this.version,
              value: 360,
              itemStyle: {
                normal: {
                  color: 'Cyan',
                  barBorderRadius: 30,
                  // shadowBlur: 50,
                  shadowColor: 'rgba(21,41,185,.75)'
                }
              }
            },

          ]
        }]
      });
    },
    pieChartsSkyBlue() {
      let myChart = this.$echarts.init(this.$refs.chartPSkyBlue);
      //console.log(this.$refs.chart)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '已失联',
          left: 'center',//主副标题的水平位置
          padding: 20,//标题内边距,
          itemGap: 110,//主副标题间距
          textStyle: {
            color: 'MediumTurquoise',
            fontStyle: 'normal',
            fontSize: 14,
            fontWeight: 'normal',
          },
          subtext: 'j金额',
          subtextStyle: {
            color: '#00BFFF',
            fontSize: 14,
            fontWeight: 'normal'
          },

        },
        labelLine: {
          show: false
        },
        series: [{
          avoidLabelOverlap: false,
          labelLine: {
            show: false
          },

          label: {
            show: false, normal: {
              show: true,
              position: 'center',
              color: '#4c4a4a',
              formatter: this.version

            },
            position: 'center',
            emphasis: {//中间文字显示
              show: true,
            }
          },
          radius: ['50%', '30%'],
          center: ["50%", "50%"],
          name: '金额',
          type: 'pie',
          data: [
            {
              value: 180, name: '100', itemStyle: {
                normal: {
                  color: '#87CEEB',
                  barBorderRadius: 30,
                  // shadowBlur: 50,
                  shadowColor: 'rgba(21,41,185,.75)'
                }
              }
            },
            {
              value: 360,
              name: this.version,
              itemStyle: {
                normal: {
                  color: 'Gainsboro',
                  barBorderRadius: 30,
                  // shadowBlur: 50,
                  shadowColor: 'rgba(21,41,185,.75)'
                }
              }
            },

          ]
        }]
      });
    },
    pieChartsgreen() {
      let myChart = this.$echarts.init(this.$refs.chartPgreen);
     // console.log(this.$refs.chart)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '无效沟通',
          left: 'center',//主副标题的水平位置
          padding: 20,//标题内边距,
          itemGap: 110,//主副标题间距
          textStyle: {
            color: 'MediumTurquoise',
            fontStyle: 'normal',
            fontSize: 14,
            fontWeight: 'normal',
          },
          subtext: 'j金额',
          subtextStyle: {
            color: '#00BFFF',
            fontSize: 14,
            fontWeight: 'normal'
          },

        },
        labelLine: {
          show: false
        },
        series: [{
          avoidLabelOverlap: false,
          labelLine: {
            show: false
          },

          label: {
            show: false, normal: {
              show: true,
              position: 'center',
              color: '#4c4a4a',
              formatter: this.version

            },
            position: 'center',
            emphasis: {//中间文字显示
              show: true,
            }
          },
          radius: ['50%', '30%'],
          center: ["50%", "50%"],
          name: '金额',
          type: 'pie',
          data: [
            {
              value: 180, name: '100', itemStyle: {
                normal: {
                  color: '#32CD32',
                  barBorderRadius: 30,
                  // shadowBlur: 50,
                  shadowColor: 'rgba(21,41,185,.75)'
                }
              }
            },
            {
              value: 360,
              name: this.version,
              itemStyle: {
                normal: {
                  color: 'Gainsboro',
                  barBorderRadius: 30,
                  // shadowBlur: 50,
                  shadowColor: 'rgba(21,41,185,.75)'
                }
              }
            },

          ]
        }]
      });
    },
  },
};
</script>
<style lang="scss" scoped>

.el-form-item {
  margin-bottom: 1px;
}

.el-tabs__header {
  margin: 0 0 0 0 !important;
}

.divisional {
  border: 1px solid grey;
  padding: 5px 5px;

  /deep/ .el-row:nth-child(2) {
    width: 100%;
    //height: 20vh;
    margin-left: 0px!important;
    // background: pink;
    padding: 0;
    margin: 0;
    .el-col {
      padding: 0;
      height: inherit;
      box-sizing: border-box;
      background: #ffffff;
      overflow: hidden;
      div:nth-child(1) {
        width: 100%;
        height: inherit;
        //   background: yellowgreen;
        flex-wrap: wrap;
        // justify-content: flex-start;
        justify-content: space-around;
        box-sizing: border-box;

        .v_box {
          width: 20%;
          //height: 8vh;
          // margin-bottom: 10px;
          // background: chocolate;
          overflow: hidden;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          padding: 0;
          border: none;
          .el-input{
            width: 70%;
          }
          div {
            padding: 0;
          }
          &:nth-child(3) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            padding-top: 10px;
            .el-button {
              width: 70px;
              height: 30px;
            }
          }
        }
      }
    }
  }
  /deep/ .el-row:nth-child(3) {
    width: 100%;
    padding: 0;
    margin: 0;
    margin-left: 0px!important;
    table {
      tbody {
        tr {
          td {
            .cell {
              box-sizing: border-box;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal !important;
              line-height: inherit;
              //   padding-right: 10px;
            }
          }
        }
      }
    }
  }
  .pageBox {
    display: flex;
    width: 100%;
    justify-content: flex-end;;
  }
  /deep/ .el-dialog {
    .mainInfoBox {
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;
      box-sizing: border-box;
      .infoBox {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40%;
        label {
          width: auto;
          display: inline-block;
        }
        .el-input {
          width: 80%;
        }
      }
    }
  }
  .speDialog {
    .mainInfoBox {
      width: 100%;
      height: 30vh;
      padding-left: 20px;
      .infoBox {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 40px;
        width: 40%;
        label {
          min-width: 60px;
          text-align: right;
          display: inline-block;
          margin-right: 4px;
        }
        .el-input {
          width: 55%;
        }
      }
    }
  }

  .tjdiv {
    display: inline;
    float: left;
    width: 880px;
    height: 257px;
    background: white;
    border-radius: 5px;

    .right-tt {
      margin: 10px 10px;

      .txt-span {
        margin: 0 5px;
        font-size: 16px;
        font-weight: bold;
      }
    }


  }


  .taskDiv{
    display: inline;
    float: right;
    width: 880px;
    margin-left: 33px;
    background: white;
    height: 257px;
    border-radius: 5px;

    .left-tt{
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }

    .el-tab-pane{
      max-height: 200px;
      overflow-y: auto;
    }

  }
  .el-tabs--card>.el-tabs__header {
    margin: 0px !important;
  }

  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    margin: 0 0 20px 0;
    line-height: 40px;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .search_box .inpText{
    width: 40px;
    justify-content: space-between;
  }
}

</style>
